<template>
  <div class="alarm">
    <div class="row1">
      <Card class="tzgg">
        <Module1 :data="moduleData0" />
      </Card>
      <div class="pei-card-box">
        <Card>
          <div class="pei-list" :style="{ '--col': pieList.length }">
            <div
              class="pei-list-item"
              v-for="(item, index) in pieList"
              :key="index"
            >
              <PeiChart :sourceData="item" />
            </div>
          </div>
        </Card>
      </div>
    </div>
    <div class="row2">
      <div class="map-parent">
        <Card class="map-card">
          <!-- <div class="map-mark"></div> -->
          <MapBox
            :markList="farmLandInfoVoList"
            :iswarin="true"
            @markerClick="markerClick"
          />
        </Card>
      </div>
      <div class="row2-right">
        <Card class="card-line">
          <WModule title="环境温度">
            <div class="line-box">
              <lineChart
                :lineProps="{
                  color: 'rgba(255, 124, 25, 1)',
                  yAxisName: '单位/C°'
                }"
                :data="lineData1"
              />
            </div>
          </WModule>
          <WModule title="环境湿度">
            <lineChart
              :lineProps="{
                color: 'rgba(19, 245, 170, 1)',
                yAxisName: '单位/%'
              }"
              :data="lineData2"
            />
          </WModule>
        </Card>

        <Card class="card-line">
          <WModule title="土壤温度">
            <lineChart
              :lineProps="{
                color: 'rgba(255, 124, 25, 1)',
                yAxisName: '单位/C°'
              }"
              :data="lineData3"
            />
          </WModule>
          <WModule title="土壤湿度">
            <lineChart
              :lineProps="{
                color: 'rgba(19, 245, 170, 1)',
                yAxisName: '单位/%'
              }"
              :data="lineData4"
            />
          </WModule>
        </Card>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, onMounted, ref, toRaw, watch } from 'vue'

import dayjs from 'dayjs'

import {
  getProjectStatics,
  getHouseDeviceWarn,
  getHistoryDataList,
  farmDeviceWarnRecordList
} from '@/api'

import Card from '@/components/wcard/index.vue'
import WModule from '@/components/wmodule/index.vue'
import MapBox from '../home/chartmodule/mapbox.vue'
import Module1 from './component/module1.vue'
import lineChart from './chartmodule/lineChart.vue'
import PeiChart from './chartmodule/peiChart.vue'

const farmLandInfoVoList = ref([]) // 地图上相关地块信息

const currentDpInfor = ref({
  name: ''
})

const dpData = ref([])

const headerMenu = ref(false)

const pieColor = ['rgba(255, 124, 25, 1)', 'rgba(19, 245, 170, 1)']

const pieList = ref([])

const moduleData0 = ref([])
const lineData1 = ref([])
const lineData2 = ref([])
const lineData3 = ref([])
const lineData4 = ref([])

onMounted(() => {
  getProjectStatics({
    id: 1
  }).then((res) => {
    if (res.code === 200) {
      const { data = {} } = res
      const _farmLandInfoVoList = data.farmLandInfoVoList || []
      farmLandInfoVoList.value = _farmLandInfoVoList
      if (_farmLandInfoVoList.length > 0) {
        const _greenhouseInfoVoList =
          _farmLandInfoVoList[0].greenhouseInfoVoList || []
        dpData.value = _greenhouseInfoVoList
        if (_greenhouseInfoVoList.length > 0) {
          currentDpInfor.value = {
            name: _greenhouseInfoVoList[0].name,
            id: _greenhouseInfoVoList[0].id
          }
        }
      }
    }
  })
  farmDeviceWarnRecordList({
    pageNum: 1,
    pageSize: 10
  }).then((res) => {
    if (res.code === 200) {
      const { rows = [] } = res
      moduleData0.value = rows
    }
  })
  document.addEventListener('click', (e) => {
    if (headerMenu.value) {
      headerMenu.value = false
    }
  })
})

const headermenuClick = (e) => {
  headerMenu.value = !headerMenu.value
  e.stopPropagation()
}

const headerMenuItemClick = (item) => {
  const val = toRaw(item)
  currentDpInfor.value = {
    name: val.name,
    id: val.id
  }
}
const markerClick = (item) => {
  const _greenhouseInfoVoList = item.greenhouseInfoVoList || []
  if (_greenhouseInfoVoList.length > 0) {
    dpData.value = _greenhouseInfoVoList
    currentDpInfor.value = {
      name: _greenhouseInfoVoList[0].name,
      id: _greenhouseInfoVoList[0].id
    }
  } else {
    dpData.value = []
    currentDpInfor.value = {
      name: '',
      id: ''
    }
  }
}

watch(
  () => currentDpInfor.value,
  (newVal) => {
    const _newVal = toRaw(newVal)
    if (_newVal.id) {
      getHouseDeviceWarn({ id: _newVal.id }).then((res) => {
        if (res.code === 200) {
          const { data = [] } = res
          console.log('data===kk', data)
          let _pieList = []
          for (let i = 0; i < data.length; i++) {
            const _colorIndex = i % 2
            let obj = {
              color: pieColor[_colorIndex],
              label: data[i].deviceItemName
            }

            const _metData = data[i].metData || data[i].soilData
            if (/温度/.test(data[i].deviceItemName)) {
              obj.uint = '°C'
            }
            if (/湿度/.test(data[i].deviceItemName)) {
              obj.value = [_metData.humValueStr || 0]
              obj.uint = '%'
            } else {
              obj.value = [_metData.temValueStr || 0]
            }
            _pieList.push(obj)
          }
          console.log('00_pieList0', _pieList)
          pieList.value = _pieList
        }
      })
      getHistoryDataList({
        id: _newVal.id
      }).then((res) => {
        if (res.code === 200) {
          const data = res.data
          const _metHistoryData = data.metHistoryData || {}
          const _soilHistoryData = data.soilHistoryData || {}

          let _lineData1 = []
          let _lineData2 = []
          const row1 = _metHistoryData.rows || []
          for (let i = 0; i < row1.length; i++) {
            // 环境
            const _recordTimeStr = dayjs(row1[i].recordTimeStr).format(
              'MM/DD HH'
            )

            _lineData1.push({
              name: '环境温度',
              value: row1[i].temValue,
              recordTimeStr: _recordTimeStr
            })
            _lineData2.push({
              name: '环境湿度',
              value: row1[i].humValue,
              recordTimeStr: _recordTimeStr
            })
          }

          let _lineData3 = []
          let _lineData4 = []

          const row2 = _soilHistoryData.rows || []

          for (let i = 0; i < row2.length; i++) {
            // 土壤
            const _recordTimeStr = dayjs(row2[i].recordTimeStr).format(
              'MM/DD HH'
            )
            _lineData3.push({
              name: '土壤温度',
              value: row2[i].temValue,
              recordTimeStr: _recordTimeStr
            })
            _lineData4.push({
              name: '土壤湿度',
              value: row2[i].humValue,
              recordTimeStr: _recordTimeStr
            })
          }
          lineData1.value = _lineData1
          lineData2.value = _lineData2
          lineData3.value = _lineData3
          lineData4.value = _lineData4
        }
      })
    } else {
      pieList.value = []
      lineData1.value = []
      lineData2.value = []
      lineData3.value = []
      lineData4.value = []
    }
  }
)
</script>
<style lang="scss" scoped>
.alarm {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  .row1 {
    width: 100%;
    height: 280px;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 18px;
    .tzgg {
      width: 480px;
      flex-shrink: 0;
    }
    .pei-card-box {
      flex: 1;
    }
    .pei-list {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: repeat(var(--col, 6), 1fr);
      .pei-list-item {
        height: 100%;
      }
    }
  }
  .row2 {
    width: 100%;
    flex: 1;
    display: grid;
    grid-template-columns: 4fr 3fr;
    grid-gap: 16px;
    .row2-right {
      display: grid;
      grid-template-columns: 1fr;
      grid-row-gap: 25px;
      grid-template-rows: 1fr 1fr;
      .card-line {
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        position: relative;
      }
    }
  }
  .map-card {
    height: 100%;
    width: 100%;
    padding: 4px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .map-parent {
    width: 100%;
    height: 100%;
    position: relative;
    .map-mark {
      position: absolute;
      left: 4px;
      right: 4px;
      top: 4px;
      bottom: 4px;
      z-index: 4;
      pointer-events: none;
      background: radial-gradient(
        circle at center,
        transparent 10%,
        #1c6f98 80%,
        #1c6f98
      );
    }
  }
  .line-box {
    height: 100%;
  }
  .cadr-header {
    width: 160px;
    height: 50px;
    position: absolute;
    background: url('@/assets/img/dp.png') no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: 0px;
    transform: translate(-50%, -50%);
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 18px;
    color: #c3ff55;
    line-height: 29px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    .icon {
      width: 11px;
      height: 6px;
    }
    .header-menu {
      position: absolute;
      top: 100%;
      left: 0px;
      width: 100%;
      background: rgba(4, 21, 21, 0.8);
      border-radius: 10px;
      border: 1px solid #07a680;
      .header-menu-item {
        width: 100%;
        padding: 14px 0px;
        text-align: center;
        box-sizing: border-box;
        cursor: pointer;
        &:hover {
          background: rgba(255, 255, 255, 0.5);
        }
      }
    }
  }
}
</style>
